<template>
    <el-table :data="list" style="width: 100%" height="300" header-row-class-name="table_header_title">
        <el-table-column type="index" label="排序" width="80"></el-table-column>
        <el-table-column label="群名称">
            <template #default="scope">
                <span>{{ scope.row.name }}</span>
                <span>（{{ scope.row.member_nums }} / 200）</span>
            </template>
        </el-table-column>
        <el-table-column label="群人数上线">
            <template #default="scope">
                群人数达到
                <el-input
                    v-model="scope.row.limit"
                    class="group_num_lint"
                    :disabled="props.look"
                    :max="200"
                    @blur="inputNum(scope.row)" />
                人，换群加入
            </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
            <template #default="scope">
                <el-button size="small" :disabled="props.look" @click="removeGroup(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
        <template #empty>
            <img class="emty_img" src="@/assets/noData.png" alt="" />
            <div class="emty_title">{{ '暂无数据' }}</div>
        </template>
    </el-table>
    <div style="margin-top: 10px">
        <el-button :icon="Plus" :disabled="props.look" @click="uploadQrewm">添加群聊 </el-button>
    </div>
    <!-- 添加群聊 -->
    <GroupChart ref="GroupChartRef" :type="1" @submit="getGroupChat" />
</template>
<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue';
import GroupChart from '@/components/chart/GroupChart.vue';
import { useStore } from '@/store';
import { IsNotEmpty, getSetionId } from '@/utils/utils';
import { ElMessage } from 'element-plus';
const props = defineProps(['look']);
const list = ref([]);
const GroupChartRef = ref(null);
const store = useStore();
// 群聊数据
const inputNum = (row: any) => {
    let num = row.limit;
    num = typeof num == 'string' ? num.replace(/\D/g, '') : num;
    if (num >= 200) {
        num = 200;
    }
    if (num <= 1) {
        num = 1;
    }
    row.limit = num;
    // list.value.map((item:any)=>{
    //   if(item.groupchat_id==row.groupchat_id){
    //     item.limit = num
    //   }
    // });
};
const uploadQrewm = () => {
    GroupChartRef.value.appDialog.visible = true;
};
const removeGroup = (index: number, row: any) => {
    list.value = list.value.filter((item: any) => item.groupchat_id != row.groupchat_id);
};
// 添加群聊
const getGroupChat = (data: any) => {
    const arr: any[] = [],
        ids = getSetionId('groupchat_id', list.value);
    if (IsNotEmpty(data)) {
        data.forEach((item: any) => {
            if (!ids.includes(item.group_id)) {
                arr.push({
                    limit: 200,
                    groupchat_id: item.group_id,
                    name: item.name,
                    member_nums: item.members_num
                });
            } else {
                ElMessage.warning(`${item.name}已添加`);
            }
        });
    }
    list.value = list.value.concat(arr);
};

defineExpose({
    list
});
</script>

<style scoped lang="scss">
.emty_img {
    transform: translateX(15%);
}

.emty_title {
    margin-top: -50px;
}

.group_num_lint {
    width: 80px;
}
</style>
